<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>一朵 - 商品评价</title>
  <!-- swiper-2.7css -->
    <link rel="stylesheet" href="__STATIC__/index/js/swiper/idangerous.swiper.css">
  <!-- swiper-2.7js -->
    <script src="__STATIC__/index/js/swiper/idangerous.swiper.min.js"></script>
  <!-- jquery-3.2.1引用 -->
    <script src="__STATIC__/index/js/global/jquery-3.2.1.min.js"></script>
  <!-- 阿里巴巴矢量图库 -->
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_561814_z72ky81kih08uxr.css">
  <!-- 公共头部 脚部 -->
    <link rel="stylesheet" href="__STATIC__/index/css/global/global.css">
  <!-- 超过1200屏幕 -->
    <link rel="stylesheet" media="screen and (min-width: 1200px)" href="__STATIC__/index/css/evaluate/evaluate1200.css" />
  <!-- 1080-1200 -->
    <link rel="stylesheet" media="screen  and (min-width: 1080px) and (max-width: 1199px) " href="__STATIC__/index/css/evaluate/evaluate1080.css"
    />
  <!-- 960-1080 -->
    <link rel="stylesheet" media="screen  and (min-width: 960px) and (max-width: 1079px) " href="__STATIC__/index/css/evaluate/evaluate960.css"
    />
  <!-- 768-959 -->
    <link rel="stylesheet" media="screen  and (min-width: 768px) and (max-width: 959px) " href="__STATIC__/index/css/evaluate/evaluate768.css"
    />
  <!-- 568-767 -->
    <link rel="stylesheet" media="screen  and (min-width: 568px) and (max-width: 767px) " href="__STATIC__/index/css/evaluate/evaluate568.css"
    />
  <!-- 375-567 -->
    <link rel="stylesheet" media="screen  and (min-width: 375px) and (max-width: 567px) " href="__STATIC__/index/css/evaluate/evaluate375.css"
    />
  <!-- 小于375-->
    <link rel="stylesheet" media="screen  and (max-width: 374px) " href="__STATIC__/index/css/evaluate/evaluate320.css" />
  <!--一引入layer-->
    <script src="__STATIC__/layer/layer.js"></script>
</head>

<form id="form1" action="{:url('User/pingjia_goods')}" method="post" >
    <input type="hidden" name="id" value="{$info.id}">
    <div class="M">
        <div class="m-header">
            <div>
                <span onclick="go_back();">
                    <span class="iconfont icon-xiangzuo"></span>
                    返回
                </span>
                <span>商品评价</span>
                <span>
                    {if condition="!empty($realname)"}
                    <a href="{:url('User/index')}" class="my">
                        {$realname}
                    </a>
                    {else /}
                    <a href="{:url('Login/loginin')}">登录</a>
                    <a href="{:url('Login/register')}">注册</a>
                    {/if}
                    <a href="{:url('MyCart/my_cart')}" class="car">
                        <span class="iconfont icon-gouwuche"></span>
                        <span>{$cart_num}</span>
                    </a>
                </span>
            </div>

        </div>
        <div class="m-goods">
            <div class="m-goods-content">
                <span>
                    <img src="{$info.logo}" alt="">
                </span>
                <span>
                    <p>{$info.name}</p>
                    <p>{$info.spec_detail}</p>
                </span>
            </div>
        </div>
        <div class="m-evaluate">
            <div>
                <p>评价</p>
                <textarea id="m-area" name="ss" placeholder="点击填写评价"></textarea>
                <p>
                    <span id="m-area-count">200</span>/200</p>
            </div>
        </div>
        <div class="m-img">
            <div>
                <p>上传照片（最多三张）</p>
                <div>
                    <label for="image_file3">
                        <img class="image_file3" src="__STATIC__/index/img/evaluate/evaluate.png" />
                    </label>
                    <input type="hidden" name="image_1" class="image_file3" />
                    <input type="file" id="image_file3" style="display:none;" onchange="uploadImg(this);" />
                </div>
                <div>
                    <label for="image_file4">
                        <img class="image_file4" src="__STATIC__/index/img/evaluate/evaluate.png" />

                    </label>
                    <input type="hidden" name="image_2" class="image_file4" />
                    <input type="file" id="image_file4" style="display:none;" onchange="uploadImg(this);" />
                </div>
                <div>
                    <label for="image_file5">
                        <img class="image_file5" src="__STATIC__/index/img/evaluate/evaluate.png" />

                    </label>
                    <input type="hidden" name="image_3" class="image_file5" />
                    <input type="file" id="image_file5" style="display:none;" onchange="uploadImg(this);" />
                </div>
            </div>
        </div>
        <a href="javascript:;" onclick="check_form(1);" class="m-bottom">
            提交
        </a>
    </div>
</form>
    <!------------------------ PC ------------------------>
<form id="form2" action="{:url('User/pingjia_goods')}" method="post" >
    <input type="hidden" name="id" value="{$info.id}">
    <div class="PC">
        <!-- 公共头部 -->
        {include file="public/p_header" /}
        <!-- 公共头部结束 -->
        <div class="pc-content">
            {include file="public/p_user" /}

            <div class="PC_right">
                {include file="public/p_user_info" /}
                <div class="pc-tihuan">
                    <div class="pc-tihuan-headline">
                        <p>订单评价</p>
                    </div>
                    <div class="pc-xunhuan">
                        <div>
                            <div class="pc-goods">
                                <div>
                                    <img src="{$info.logo}" alt="">
                                </div>
                                <div>
                                    <p>{$info.name}</p>
                                    <p>{$info.spec_detail}</p>
                                </div>
                                <div>
                                    <p>
                                        <span>￥{$info.spec_price}</span>
                                        <span>x</span>
                                        <span>{$info.goods_num}</span>
                                    </p>
                                </div>
                                <a href="javascript:;" onclick="check_form(2)" class="pc-dingdan">提交评价</a>
                            </div>
                        </div>
                    </div>
                    <div class="pc-evaluate">
                        <div>
                            <p>评价</p>
                            <div>
                                <textarea id="pc-area" name="ss" placeholder="填写评价"></textarea>
                                <p>
                                    <span id="pc-area-count">200</span>/200</p>
                            </div>
                            <p>上传图片（最多三张）</p>
                            <div class="pc-img">
                                <div>
                                    <label for="image_file">
                                        <img class="image_file" src="__STATIC__/index/img/evaluate/evaluate.png" />
                                    </label>
                                    <input type="hidden" name="image_1" class="image_file" />
                                    <input type="file" id="image_file" style="display:none;" onchange="uploadImg(this);" />
                                </div>
                                <div>
                                    <label for="image_file1">
                                        <img class="image_file1" src="__STATIC__/index/img/evaluate/evaluate.png" />

                                    </label>
                                    <input type="hidden" name="image_2" class="image_file1" />
                                    <input type="file" id="image_file1" style="display:none;" onchange="uploadImg(this);" />
                                </div>
                                <div>
                                    <label for="image_file2">
                                        <img class="image_file2" src="__STATIC__/index/img/evaluate/evaluate.png" />

                                    </label>
                                    <input type="hidden" name="image_3" class="image_file2" />
                                    <input type="file" id="image_file2" style="display:none;" onchange="uploadImg(this);" />
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 公共脚部  -->
        {include file="public/p_footer" /}
        <!-- 公共脚部 结束 -->

    </div>
</form>

    <script type="text/javascript">
        function uploadImg(obj) {
            // 隐藏的文本框
            var grandmaster_input = obj.previousSibling.previousSibling;
            // 预览的image标签
            var grandmaster_img = obj.previousSibling.previousSibling.previousSibling.previousSibling.firstChild.nextElementSibling;
            // 当前选中的文件
            var image_file = obj.files[0];
            // 当前选中文件的种类
            var image_file_type = image_file.type;
            // 限制上传文件的类别
            var image_type_reg =
                /^(image\/bmp|image\/gif|image\/jpeg|image\/jpg|image\/png|image\/tiff)$/i;
            // 验证上传文件的类别
            if (image_type_reg.test(image_file_type) != true) {
                // 格式不对报错
//                alert("请上传正确格式,例如 : .bmp .gif .jpeg .jpg .png .tiff");
                layer.msg('请上传正确格式,例如 : .bmp .gif .jpeg .jpg .png .tiff',{icon:1,time:1500,shade: 0.1}, function(index){
                    layer.close(index);
                });
                return false;
                return;
            }
            // 创建一个文件对象
            var file_reader = new FileReader();
            // 加载文件
            file_reader.onload = function (file) {
                // 计算文件大小
                var str = file.target.result;
                str = str.substring(str.indexOf(",") + 1);
                if (str.indexOf("=") > 0) {
                    str = str.substring(0, str.indexOf("="));
                }
                var str_length = str.length;
                var file_length = parseInt(str_length - (str_length / 8) * 2);
                // 文件不允许大于 1M
                if (file_length >= 1048576) {
//                    alert("文件不允许大于 1M ");
                    layer.msg('文件不允许大于 1M',{icon:1,time:1500,shade: 0.1}, function(index){
                        layer.close(index);
                    });
                    return false;
                }
                // 设置图片为选中文件
                if (obj.id == 'image_file') {
                    document.getElementsByClassName("image_file3")[0].src = file.target.result;
                    document.getElementsByClassName("image_file3")[1].value = file.target.result;
                }
                if (obj.id == 'image_file1') {
                    document.getElementsByClassName("image_file4")[0].src = file.target.result;
                    document.getElementsByClassName("image_file4")[1].value = file.target.result;
                }
                if (obj.id == 'image_file2') {
                    document.getElementsByClassName("image_file5")[0].src = file.target.result;
                    document.getElementsByClassName("image_file5")[1].value = file.target.result;
                }
                if (obj.id == 'image_file3') {
                    document.getElementsByClassName("image_file")[0].src = file.target.result;
                    document.getElementsByClassName("image_file")[1].value = file.target.result;
                }
                if (obj.id == 'image_file4') {
                    document.getElementsByClassName("image_file1")[0].src = file.target.result;
                    document.getElementsByClassName("image_file1")[1].value = file.target.result;
                }
                if (obj.id == 'image_file5') {
                    document.getElementsByClassName("image_file2")[0].src = file.target.result;
                    document.getElementsByClassName("image_file2")[1].value = file.target.result;
                }
                grandmaster_img.src = file.target.result;
                grandmaster_input.value = file.target.result;
            };
            file_reader.readAsDataURL(image_file);
        }
        /*字数限制*/

        $(function () {
            $("#pc-area").on("input propertychange", function () {
                var $this = $(this),
                    _val = $this.val(),
                    count = "";
                if (_val.length > 200) {
                    $this.val(_val.substring(0, 200));
                }
                if (_val.length >= 200) {
//                    alert('已经到了评论字数了');
                    layer.msg('已经到了评论字数了 1M',{icon:1,time:1500,shade: 0.1}, function(index){
                        layer.close(index);
                    });
                }
                $("#m-area").val(_val);
                count = 200 - $this.val().length;
                $("#pc-area-count").text(count);
            });
            $("#m-area").on("input propertychange", function () {
                var $this = $(this),
                    _val = $this.val(),
                    count = "";
                if (_val.length > 200) {
                    $this.val(_val.substring(0, 200));
                }
                if (_val.length >= 200) {
//                    alert('已经到了评论字数了');
                    layer.msg('已经到了评论字数了 1M',{icon:1,time:1500,shade: 0.1}, function(index){
                        layer.close(index);
                    });
                }

                $("#pc-area").val(_val);
                count = 200 - $this.val().length;
                $("#m-area-count").text(count);
            });


        });

        /**
         * 提交表单
         */
        function check_form(type){
            var pingjia = '';
            var image_1 = $('input[name=image_1]').val();
            var image_2 = $('input[name=image_2]').val();
            var image_3 = $('input[name=image_3]').val();
            var id = $('input[name=id]').val();
            if(type == 1){
                pingjia = $('#m-area').val();
            }else{
                pingjia = $('#pc-area').val();
            }
            if(pingjia == ''){
                layer.msg('请输入评论内容',{icon:2,time:1500,shade: 0.1}, function(index){
                    layer.close(index);
                });
                return false;
            }
            $.post("{:url('User/pingjia_goods')}",
                {id:id,pingjia:pingjia,image_1:image_1,image_2:image_2,image_3:image_3},
                function(data){
                    if(data.code == 1){
                        layer.msg('评价成功',{icon:1,time:1500,shade: 0.1}, function(index){
                            layer.close(index);
                            window.location.href = "{:url('User/index')}";
                        });
                    }else{
                        layer.msg('评价失败',{icon:2,time:1500,shade: 0.1}, function(index){
                            layer.close(index);
                        });
                    }
                }
            );
        }

        /**
         * 返回上一页
         */
        function go_back(){
            window.history.back();  //返回上一页
        }

        /**
         * 完善会员信息
         */
        function edit_member_info(){
            window.location.href = "{:url('User/my_center')}";
        }
    </script>
</body>

</html>